<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer {
            width: 400px;
            margin: 100px auto;
            text-align: center;
        }

        table {
            width: 400px;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        td,
        th {
            border: 1px black solid;
            padding: 10px 0;
        }

        form div {
            margin: 10px 0;
        }
    </style>

    <script>
        window.addEventListener("DOMContentLoaded", function () {
            // const links = document.links;
            // for (let i = 0; i < links.length; i++) {
            //     links[i].onclick = function (e) {
            //         e.preventDefault();
            //         const tr = this.closest("tr");
            //         tr.remove();
            //         // const tds = tr.querySelectorAll("td");
            //         // for (let j = 0; j < 3 && j < tds.length; j++) {
            //         //     tds[j].textContent = '';
            //         // }
            //     }
            // };

            document.querySelector("table").addEventListener("click", function (e) {
                if (e.target.tagName === "A") {
                    const tr = e.target.closest("tr");
                    const empName = tr.getElementsByTagName("td")[0].textContent;
                    let flag = confirm("确定要删除【"+empName+"】吗？");
                    if (!flag) return;
                    if (tr) tr.remove();
                }
            });


            const form = document.querySelector("form");
            const nameInput = document.getElementById("name");
            const emailInput = document.getElementById("email");
            const salaryInput = document.getElementById("salary");
            const tbody = document.querySelector("tbody");

            form.addEventListener("submit", function (e) {
                e.preventDefault();

                const name = nameInput.value.trim();
                const email = emailInput.value.trim();
                const salary = salaryInput.value.trim();

                if (!name || !email || !salary) {
                    alert("请填写完整信息");
                    return;
                }

                // 创建新行
                const newRow = document.createElement("tr");
                // newRow.innerHTML = `
                //     <td>${name}</td>
                //     <td>${email}</td>
                //     <td>${salary}</td>
                //     <td><a href="javascript:;">删除</a></td>
                // `;
                const nameTd = document.createElement("td");
                const emailTd = document.createElement("td");
                const salaryTd = document.createElement("td");

                nameTd.textContent = name;
                emailTd.textContent = email;
                salaryTd.textContent = salary;

                tbody.appendChild(newRow);
                newRow.appendChild(nameTd);
                newRow.appendChild(emailTd);
                newRow.appendChild(salaryTd);
                tr.insertAdjacentElement("beforeend", '<td><a href="javascript:;">删除</a></td>');
                form.reset();
            });
        })
    </script>
</head>

<body>
    <div class="outer">
        <table>
            <tbody>
                <tr>
                    <th>姓名</th>
                    <th>邮件</th>
                    <th>薪资</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td>孙悟空</td>
                    <td>swk@hgs.com</td>
                    <td>10000</td>
                    <td><a href="javascript:;">删除</a></td>
                </tr>
                <tr>
                    <td>猪八戒</td>
                    <td>zbj@glz.com</td>
                    <td>8000</td>
                    <td><a href="javascript:;">删除</a></td>
                </tr>
                <tr>
                    <td>沙和尚</td>
                    <td>shs@lsh.com</td>
                    <td>6000</td>
                    <td><a href="javascript:;">删除</a></td>
                </tr>
            </tbody>
        </table>

        <form action="#">
            <div>
                <label for="name">姓名</label>
                <input type="text" id="name" />
            </div>
            <div>
                <label for="email">邮件</label>
                <input type="email" id="email" />
            </div>
            <div>
                <label for="salary">薪资</label>
                <input type="number" id="salary" />
            </div>
            <button>添加</button>
        </form>
    </div>
</body>

</html>